<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 配置Tailwind自定义主题
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        neutral: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .menu-hover {
                @apply transition-all duration-300 hover:bg-primary/10 hover:translate-x-1;
            }
            .btn-effect {
                @apply transform transition-all duration-300 hover:scale-105 hover:shadow-lg active:scale-95;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
<!-- 主容器 -->
<main class="flex-1 container mx-auto px-4 py-8 max-w-4xl">
    <!-- 用户信息卡片 -->
    <div class="bg-white rounded-2xl p-6 card-shadow mb-8 transform transition-all duration-500 hover:shadow-xl">
        <div class="flex flex-col md:flex-row items-center gap-6">
            <div class="avatar-wrapper relative">
                <img class="avatar w-24 h-24 rounded-full object-cover border-4 border-primary/20 shadow-md"
                     src="https://picsum.photos/200/200?random=1"
                     alt="用户头像">
                <div class="absolute -bottom-2 -right-2 bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg">
                    <i class="fa fa-camera"></i>
                </div>
            </div>
            <div class="user-detail flex-1 text-center md:text-left">
                <h2 class="nickname text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">未登录</h2>
                <p class="text-gray-500 mb-4">请登录以享受更多功能</p>
                <button class="login-btn bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-6 rounded-full btn-effect w-full md:w-auto">
                    <i class="fa fa-user-circle mr-2"></i>点击登录
                </button>
            </div>
        </div>
    </div>

    <!-- 菜单列表 -->
    <div class="bg-white rounded-2xl overflow-hidden card-shadow mb-8">
        <div class="menu-list">
            <div class="menu-item flex items-center justify-between p-5 border-b border-gray-100 menu-hover">
                <div class="menu-item-left flex items-center gap-4">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-heart-o text-xl"></i>
                    </div>
                    <span class="font-medium">我的收藏</span>
                </div>
                <i class="fa fa-chevron-right text-gray-400"></i>
            </div>
            <div class="menu-item flex items-center justify-between p-5 border-b border-gray-100 menu-hover">
                <div class="menu-item-left flex items-center gap-4">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-bell-o text-xl"></i>
                    </div>
                    <span class="font-medium">消息通知</span>
                    <span class="bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">3</span>
                </div>
                <i class="fa fa-chevron-right text-gray-400"></i>
            </div>
            <div class="menu-item flex items-center justify-between p-5 border-b border-gray-100 menu-hover">
                <div class="menu-item-left flex items-center gap-4">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-cog text-xl"></i>
                    </div>
                    <span class="font-medium">设置</span>
                </div>
                <i class="fa fa-chevron-right text-gray-400"></i>
            </div>
            <div class="menu-item flex items-center justify-between p-5 menu-hover">
                <div class="menu-item-left flex items-center gap-4">
                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-info-circle text-xl"></i>
                    </div>
                    <span class="font-medium">关于我们</span>
                </div>
                <i class="fa fa-chevron-right text-gray-400"></i>
            </div>
        </div>
    </div>

    <!-- 地区选择 -->
    <div class="bg-white rounded-2xl p-6 card-shadow mb-8">
        <h3 class="text-lg font-semibold mb-4 flex items-center">
            <i class="fa fa-map-marker text-primary mr-2"></i>地区选择
        </h3>
        <div class="region-select grid grid-cols-1 md:grid-cols-3 gap-4">
            <select id="province" class="bg-gray-50 border border-gray-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                <option value="">选择省份</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广东">广东</option>
            </select>
            <select id="city" class="bg-gray-50 border border-gray-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                <option value="">选择城市</option>
            </select>
            <select id="county" class="bg-gray-50 border border-gray-200 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                <option value="">选择区县</option>
            </select>
        </div>
    </div>

    <!-- 版本信息 -->
    <div class="version-info text-center text-gray-400 text-sm mb-4">
        <span>版本 1.0.0</span>
    </div>
</main>

<!-- 底部导航 -->
<footer class="footer bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0 z-10">
    <div class="flex justify-around items-center h-16">
        <a href="index.html" class="flex flex-col items-center justify-center text-primary">
            <i class="fa fa-home text-xl mb-1"></i>
            <span class="text-xs">主页</span>
        </a>
        <a href="profile.html" class="flex flex-col items-center justify-center text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-user text-xl mb-1"></i>
            <span class="text-xs">我的</span>
        </a>
    </div>
</footer>

<!-- 页面加载动画 -->
<script>
    // 模拟页面加载效果
    document.addEventListener('DOMContentLoaded', () => {
        document.body.classList.add('opacity-100');
        document.body.classList.remove('opacity-0');
    });
</script>
</body>
</html>
